<script>
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";

export default {
  name: "vueX",
  data(){
    return {
      num:100
    }
  },

  computed: {
    // state 语法糖
    ...mapState({
      msg1: state => state.msg,
      age: state => state.stateObj.age,
      num2: state => state.mine.mineNum,
    }),

    // getters
    // ...mapGetters(['getCount','getMsg'])
    ...mapGetters({
      getCount1: 'getCount',
      // 自定义方法名：‘原方法名’
      getMsg1: 'getMsg'
    })


  },



  methods: {
    //   mutations语法糖
    // ...mapMutations(['setCount']),
    ...mapMutations({
      // 自定义方法名：‘原方法名’
      setCount1: 'setCount',
      // setNum1: 'setMineNum',
      // setNum2: 'mine/setMineNum',
    }),


    // actions的语法糖
    // ...mapActions(['setMsg']),
    ...mapActions({
      setMsgNew: 'setMsg'
    }),


    changeCount() {
      // commit(方法名,修改的值)
      // commit({type:方法名，参数：参数值})
      // this.$store.commit('setCount',200)
      // this.$store.commit('setCount',{abc:200})
      // this.$store.commit('setCount',[200])
      /*this.$store.commit({
        type: 'setCount',
        abc: 200
      })*/
      console.log(this.$store.state.count)


      this.setCount1(300)


      //   actions
      //   dispatch(方法名,修改的值)
      // this.$store.dispatch('setMsg','这是actions修改的Msg')
      /*this.$store.dispatch({
        type: 'setMsg',
        msgNew: '这是actions修改的Msg'
      })*/
      // this.setMsg('这是actions修改的Msg')
      this.setMsgNew('这是actions修改的Msg')


      // this.$store.commit('setMineNum',2000)
      // this.$store.commit('setMineNum', 3000)
      // this.$store.commit('mine/setMineNum', 2000)
      // this.setNum1(2000)
      // this.setNum2(2000)



    },
  },




  created(){
    console.log(this.$store,'$store')

    // 获取state中的数据
    console.log(this.$store.state.msg)
    console.log(this.$store.state.stateObj.age)
    console.log(this.msg1,'msg1')
    console.log(this.age,'age')
    console.log(this.num)
    this.$store.getters.getCount
    // console.log(this.$store.getters.getCount)


    // getters
    // this.$store.getters.getCount
    // this.getCount
    // console.log(this.getCount)
    this.getCount1
    // this.getMsg
    this.getMsg1


    //   mutations
    // this.$store.commit('setCount',200)
    console.log(this.$store.state.mine.mineNum)
    console.log(this.num2)
  }
}
</script>

<template>
<div>
  vueX页面
  {{num}}
  {{$store.state.msg}}
  {{msg1}}
  <p>{{ this.$store.state.count }}---count</p>
  <button @click="changeCount">修改count</button>
  {{ num2 }}--{{ $store.state.mine.mineNum }}
</div>
</template>

<style scoped lang="less">

</style>